<div>
    省份：
    <select id="selPro">

    </select>
</div>
<div>
    城市：
    <select id="selCity">

    </select>
</div>
<div>
    区县：
    <select id="selArea">

    </select>
</div>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    function setCity(data,t) {
        var city;
        var prov = t.val();
        $("#selCity").empty();
        $('#selArea').empty();
        for (var i = 0; i < data.length; i++) {
            if (data[i].name == prov) {
                city = data[i].city;
            }
        }
        $.each(city, function (i, c) {
            $('<option></option>').text(c.name).val(c.name).appendTo($('#selCity'));
        })
    }
    function setArea(data,t) {
        var area;
        var city = t.val();
        $('#selArea').empty();
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < data[i].city.length; j++) {
                if (data[i].city[j].name == city) {
                    area = data[i].city[j].area;
                }
            }
        }
        $.each(area, function (i, a) {
            $('<option></option>').text(a).val(a).appendTo($('#selArea'));
        })
    }
    $(function () {
        var settings = {
            url: '../api/pca.json',//发送网络请求的地址
            type: 'get',//请求方式 默认GET,POST
            cache: false,//不缓存此页面
            dataType: 'json',//预期服务器返回的数据类型
            success: function (data) {//请求成功后的回调函数
                //response|data 服务器响应的数据
                $.each(data, function (index, p) {
                    $('<option></option>').text(p.name).val(p.name).appendTo($('#selPro'));
                });
                setCity(data,$('#selPro'));
                setArea(data,$('#selCity'));
                
                $('#selPro').on('change', function () {
                    setCity(data,$(this));
                    setArea(data,$('#selCity'));
                });

                $('#selCity').on('change', function () {
                    setArea(data,$(this));
                })
            },
            error: function (xhr, textStatus, textStatus) {//请求失败后的回调函数
                console.table('出错了');
            }
        }
        $.ajax(settings);
    })
</script>